<template>
  <div class="toolbar">
    <div class="toolbar-left">
      <el-button @click="$emit('goBack')" icon="ArrowLeft">返回</el-button>
      <el-button @click="$emit('showFormat')" icon="Setting">格式</el-button>
      <el-button @click="$emit('print')" type="primary" icon="Printer">打印</el-button>
    </div>
    <div class="toolbar-right">
      <span>第 {{ currentPage }} 页 共 {{ totalPages }} 页</span>
      <el-button-group class="page-nav">
        <el-button @click="$emit('prevPage')" :disabled="currentPage <= 1" icon="ArrowUp"></el-button>
        <el-button
          @click="$emit('nextPage')"
          :disabled="currentPage >= totalPages"
          icon="ArrowDown"
        ></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup>
defineProps({
  currentPage: {
    type: Number,
    required: true
  },
  totalPages: {
    type: Number,
    required: true
  }
})

defineEmits(['goBack', 'showFormat', 'print', 'prevPage', 'nextPage'])
</script>

<style scoped>
.toolbar {
  background: white;
  padding: 12px 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-left {
  display: flex;
  gap: 12px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-nav {
  margin-left: 12px;
}
</style>
